<template>
	<view>
		<headerTar title="确认支付" />
		<view class="tip">
			<view class="b_title">选择充电时间</view>
			<view class="b_title2">插座号/1号</view>
		</view>
		<view class="content">
			<view class="c_box" :class="{ c_box_click: moneySelected == i }" v-for="(item, i) in tableData" :key="i"
				@click="moneySed(item,i)">
				<view class="c_txt"> {{ item.time }}<text>分钟</text> </view>
				<view class="c_money"> {{ item.price }}元 </view>
			</view>
		</view>
		<view class="tip">
			<view class="b_title">电池类型</view>
		</view>
		<view class="content">
			<view class="c_box" :class="{ c_box_green: batterySelected == i }" v-for="(item, i) in batteryType" :key="i"
				@click="selected(i)">
				<view class="c_txt">
					{{ item.txt1 }}
				</view>
				<view class="c_money">
					{{ item.txt2 }}
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="b_money"> <text>￥</text>{{ showPrice }} </view>
			<view class="goSettlement" @click="go()"> 去结算 </view>
		</view>
		<view class="dialog" v-if="show"> </view>
		<view class="popup" v-if="show">
			<view class="top">
				<view class="top_txt">
					请选择充电模式
				</view>
			</view>
			<view class="center">
				<view class="c_left">
					<view class="c_left_txt1">
						普通充电
					</view>
					<view class="c_left_txt2">
						无保障
					</view>
				</view>
				<view class="c_right">
					<view class="c_left_txt1">
						安心充电
					</view>
					<view class="c_left_txt2">
						0.09元/次 最高补偿5000元
					</view>
				</view>
			</view>
			<view class="xian">
				选择安心充电模式，后续将根据您的意愿自行勾选
			</view>
			<view class="floot">
				<view class="f_left">
					<u-icon name="error" size="12"></u-icon>
				</view>
				<view class="f_right">
					<view class="f_txt"> 本次充电预收10元</view>
					<view class="f_txt">充电结束后未使用余额自动原路返回，如未退款</view>
					<view class="f_txt">请拨打0000-0000000</view>
				</view>
			</view>
			<view class="btn">
				<view class="pt" @click="goImmediatePay(1)">普通充电</view>
				<view class="ax" @click="goImmediatePay(2)">安心充电</view>
			</view>
		</view>

	</view>
</template>

<script>
	import headerTar from '@/components/headerTar/header'
	import {
		getRateApi
	} from "@/api/map.js";
	import {
		startChargeApi
	} from "@/api/pay.js";
	import log from "../../utils/utils.log";
	const MD5 = require('@/utils/md5.js')
	export default {
		components: {
			headerTar
		},
		data() {
			return {
				wxCode: "",
				show: false,
				content: 'deswqadsss',
				batteryType: [{
						txt1: "铅酸48V",
						txt2: "满电58V",
						value: 0,
						val: 5800,
					},
					{
						txt1: "铅酸60V",
						txt2: "满电72.5V",
						value: 1,
						val: 7250,
					},
					{
						txt1: "铅酸72V",
						txt2: "满电87V",
						value: 2,
						val: 8700,
					},
					{
						txt1: "锂电48V",
						txt2: "满电54.6V",
						value: 3,
						val: 5460,
					},
					{
						txt1: "锂电60V",
						txt2: "满电71.4V",
						value: 4,
						val: 7140,
					},
					{
						txt1: "锂电72V",
						txt2: "满电84V",
						value: 5,
						val: 8400,
					},
				],
				batterySelected: 0, //电池类型选中
				moneySelected: 0, //费用选中
				tableData: [],
				showPrice: 0, //记录点击价格
				deviceId: '', //设备id
				portId: '' //端口id
			};
		},
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			this.deviceId = option.deviceId
			this.portId = option.portId
			getRateApi({
				deviceId: option.deviceId - 0,
			}).then((res) => {
				this.tableData = JSON.parse(res.data.showRate);
				this.showPrice = this.tableData[0].price
			});
		},
		methods: {
			goImmediatePay(type) {
				//type 1-普通  2-安心充电
				console.log(this.tableData);
				let price = 0
				type == 1 ? price : price = price + 0.09
				let params = {
					deviceId: this.deviceId - 0, //设备id
					portId: this.portId - 0, //端口id 
					payType: 0, //微信 0 钱包1
					price: price + (this.tableData[this.moneySelected].price - 0),
					time: this.tableData[this.moneySelected].time - 0,
					insurePrice: price, // 放心充金额
					voltage: this.batteryType[this.batterySelected].val
				}
				this.show = false
				uni.navigateTo({
					url: '/pages/immediatePay/immediatePay?obj=' + JSON.stringify(params)
				});
			},
			selected(i) {
				this.batterySelected = i;
			},
			moneySed(item, i) {
				this.showPrice = item.price
				this.moneySelected = i
			},
			go() {
				this.show = true
			},
		}
	};
</script>

<style lang="scss" scoped>
	.tip {
		margin-top: 20rpx;
		position: relative;

		.b_title::before {
			content: "";
			position: absolute;
			top: 8rpx;
			left: 30rpx;
			width: 6rpx;
			height: 32rpx;
			background-color: #3dc579;
		}

		.b_title {
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 50rpx;
			margin-bottom: 30rpx;
		}

		.b_title2 {
			position: absolute;
			top: -4rpx;
			right: 20rpx;
			padding: 10rpx;
			color: #fff;
			background-color: #3dc579;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-weight: bold;
		}
	}

	.content {
		margin: 30rpx;
		overflow: hidden;

		.c_box1 {
			display: inline-block;
			width: 30%;
			height: 140rpx;
			line-height: 100rpx;
			text-align: center;
			color: #ca372d;
			border-radius: 10rpx;
			border: 4rpx solid #ca372d;
			margin-right: 25rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.c_txt {
				font-weight: bold;
				font-size: 32rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				overflow: hidden;
			}
		}

		.c_box {
			display: inline-block;
			width: 30%;
			height: 140rpx;
			line-height: 50rpx;
			text-align: center;
			// background-color: #f4fff8;
			color: #fff;
			background-color: #00b167;
			border-radius: 10rpx;
			border: 2rpx solid #00b167;
			margin-right: 25rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.c_txt {
				font-size: 32rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				overflow: hidden;

				text {
					font-size: 24rpx;
				}
			}

			.c_money {
				font-size: 28rpx;
			}
		}

		.c_box:nth-child(3n) {
			margin-right: 0rpx;
		}

		.c_box_green {
			color: #00b167;
			border: 2rpx solid #00b167;
			background-color: #fff;

			.c_txt {
				color: #00b167;
			}

		}

		.c_box_click {
			background-color: #fff;
			color: #00b167;
			border: 2rpx solid #00b167;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 150rpx;
		padding: 0 20rpx;
		line-height: 150rpx;
		border-top: 2rpx solid #e7e7e7;
		box-sizing: border-box;

		.b_money {
			font-size: 40rpx;
			color: red;
			font-weight: bold;

			text {
				font-weight: 300;
				font-size: 32rpx;
			}
		}

		.goSettlement {
			margin-top: 35rpx;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 12rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #fff;
			background-color: #30bf62;
		}
	}


	.dialog {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: #666666;
		opacity: 0.9;
	}

	.popup {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 600rpx;
		padding: 40rpx 30rpx;
		margin-left: -300rpx;
		margin-top: -290rpx;
		box-sizing: border-box;
		overflow: hidden;
		background: #fff;
		border-radius: 12rpx;
		background-color: #fff;
		opacity: 1;

		.top_txt {
			font-weight: bold;
			font-size: 26rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		// .top_txt::before {
		// 	content: '';
		// 	width: 50rpx;
		// 	height: 6rpx;
		// 	background: linear-gradient(to right, #fff, #2fbe62);
		// }

		.center {
			display: flex;
			height: 140rpx;
			border-radius: 8rpx;

			.c_right,
			.c_left {
				flex: 1;
				background-color: #e9e9e9;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.c_left_txt1 {
					font-size: 26rpx;
				}

				.c_left_txt2 {
					font-size: 20rpx;
					color: #727272;
				}
			}

			.c_right {
				flex: 2;
				background-color: #ffedd5;
			}
		}

		.xian {
			margin-top: 10rpx;
			font-size: 18rpx;
			text-align: center;
			color: #666666;
			margin-bottom: 10rpx;
		}

		.floot {
			padding: 30rpx 0;
			display: flex;
			line-height: 32rpx;
			font-size: 20rpx;
			color: #262626;
			border-top: 2rpx solid #e7e7e7;

			.f_left {
				padding-top: 7rpx;
			}
		}

		.btn {
			display: flex;

			.pt {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-weight: bold;
				font-size: 28rpx;
				border: 2rpx solid #bdbdbd;
				color: #848484;
				border-radius: 4rpx;
				// box-shadow: 1rpx 1rpx 1rpx #848484;
			}

			.ax {
				margin-left: 20rpx;
				width: 320rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-weight: bold;
				color: #fff;
				font-size: 28rpx;
				background-color: #2fbe62;
				border: 2rpx solid #2fbe62;
				border-radius: 4rpx;
				// box-shadow: 1rpx 1rpx 1rpx #2fbe62;
			}
		}
	}
</style>